<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ taglib prefix="spring" uri="http://www.springframework.org/tags"%>
<%@ taglib prefix="form" uri="http://www.springframework.org/tags/form"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt"%>
<%@ taglib prefix="fn" uri="http://java.sun.com/jsp/jstl/functions"%>
<%@ taglib prefix="sec" uri="http://www.springframework.org/security/tags"%>

<!--顶部工具条-->
<div class=" w-100p mini-top-bar">
    <div class="w-1200 margin-0-auto">
        <ul class="nav-left fl">
            <li class="home"><a href="${ctx }">欧工首页</a></li>
            <c:choose>
	        	<c:when test="${currentUser == null}">
	        		<li class="login"><a href="${ctx}/user/login">登录</a></li>
            		<li class="register"><a href="${ctx }/user/register">注册</a></li>
	        	</c:when>
	        	<c:otherwise>
	        		<li class="login"><a>欢迎您,${currentUser.username }!<span style="color:blue;" onclick="javascript:location.href='j_spring_security_logout'">【退出登录】</span></a></li>
	        	</c:otherwise>
        	</c:choose>
        </ul>
        <ul class="nav-right fr">
            <li class="order"><a href="${ctx }/admin/index?target=/order/myOrder">我的订单</a></li>
            <li class="account"><a href="${ctx }/admin/index">个人中心</a></li>
            <li class="downapp"><a href="#">下载APP</a></li>
        </ul>
    </div>
</div>


<!--logo 和tags-->
<div class="w-1200 sub-nav margin-0-auto">
    <a class="logo" href="${ctx }"><img src="${ctx }/img/logo.png" width="210"></a>
     <div class="searchbar-warp-min">
         <div class="searchbar">
             <form>
                 <span class="icon-serach"></span>
                 <input class="serach-input" type="text" value="${search }" placeholder="请输入关键字">
                 <button class="serach-btn" type="button" onclick="forSearch(this);" id="btn-search">搜索</button>
                 <script>
                 $('.serach-input').on('keydown', function() {
                	 if (event.keyCode == 13) {
                		 $('#btn-search').trigger('click');
                		 return false;
                		 }
                });
                 </script>
             </form>
         </div>
         <ul class="key-words margin-0-auto">
             <c:forEach items="${categories }" var="c" begin="0" end="4">
	             <li onclick="location='${ctx}/product/list?productCategory.id=${c.id }'">${c.name }</li>
	             <li class="splider"></li>
             </c:forEach>
         </ul>     </div>
    <a href="#" class="go-shopcart">购物车(<span class="text-red" id="cartCount">0</span>)</a>
</div><!--导航-->
<div class="menu-warp  w-100p ">
    <div class="menu w-1200 margin-0-auto">
    	<div class="menu w-1200 margin-0-auto">
        <div class="menu-main" id="productTypeList">
            <div class="menu-title active">商品类目</div>
            <ul class="server-list js-server-list" style="display:none;">
            	<c:forEach items="${categories }" var="c" varStatus="s">
			        <li data-target="${s.index+1 }">
	                    <div onclick="window.open('${ctx }/product/list?productCategory.id=${c.id}');"  class="menu-sub-title"><a >${c.name }</a><i class=" fr icon icon-arrow-right"></i></div>
	                </li>
		        </c:forEach>
            </ul>
            <div class="cate-list js-cate-list">
            	<c:forEach items="${categories }" var="c" varStatus="ss">
            		<div id="cate-list-${ss.index+1 }" class="subitems">
            		<c:forEach items="${c.children }" var = "cc" varStatus="sss">
	                    <dl class="">
	                        <dt><a target="_blank" href="${ctx }/product/list?productCategory.id=${cc.id}">${cc.name }<i>&gt;</i></a></dt>
	                        <dd>
		                        <c:forEach items="${cc.children }" var = "ccc" varStatus="ssss">
		                            <a target="_blank" href="${ctx }/product/list?productCategory.id=${ccc.id}">${ccc.name }</a>
		                        </c:forEach>
	                        </dd>
	                    </dl>
                    </c:forEach>
                    </div>
            	</c:forEach>
           </div>    
        </div> 
        <ul class="menu-list">
            
            <li><a class="active" href="${ctx}/index">首页</a></li>
            <li><a href="${ctx}/designer/index">找设计师</a></li>
            <li><a href="${ctx}/design/indexNew">找方案</a></li>
            <li><a href="http://rzds.admin.3vjia.com/Login.aspx">3D软装大师</a></li>
            <li><a href="${ctx}/staybag/index">拎包入住</a></li>
            <!-- 
            <li><a class="active" href="${ctx }">首页</a></li>
            <li><a href="${ctx }/design/index">样板方案</a></li>
            <li><a href="http://rzds.admin.3vjia.com/Login.aspx" target="_blank">3D软装大师</a></li>
            <li><a href="${ctx }/hardcover/index" target="_blank">拎包入住</a></li>
            -->
        </ul>
    </div>
</div>
<script type="text/javascript">
    $('.js-server-list li').hover(function (event) {
        var target = $(this).data("target");
        console.log(target);
        $(".js-cate-list").find('.subitems.active').removeClass('active');
        $("#cate-list-"+target).addClass('active');	
    })
</script>
<script type="text/javascript" src="${ctx }/res/hplus/js/jquery.min.js"></script>
<script type="text/javascript" src="${ctx}/res/js/jquery.SuperSlide.js"></script>
<script type="text/javascript" src="${ctx}/res/js/jquery.scrollLoading.js"></script>
<script type="text/javascript">
	var json = {};
	window.onload=getCartCount;
	
	function forSearch(obj) {  //搜索,分为两种情况，第一种是主页面（head.jsp只是头部，包含在其他页面里面上有contentSearch方法，那么用页面的方法，否则就跳到列表页面）
		var searchInfo = $(obj).parents("form").find("input");
		var value = $(searchInfo).val();
		try {
			contentSearch(value);
		} catch(e) {
			location = encodeURI('${ctx}/product/list?name='+value);			
		}
		
	}
	
	function getCartCount() {   //刷新购物车
		$.ajax({
			url: "${ctx}/cart/cartCountOfUser",
			data:json,
			dataType: "json",
			type: "get",
			success: function(data) {
				if (data.success) {
					//loading带文字
					var cartCount = data.count;
					$('#cartCount').html(cartCount);
				} else {
					layer.alert(data.msg,{icon:2,skin: 'layer-ext-moon'});
				}
			}
		});
	}
	$(".go-shopcart").on('click',function() {
		location.href="${ctx}/cart/cartList";
	});
	$('#productTypeList').on('mouseover',function() {
		$(this).find('ul').show();
	});
	$('#productTypeList').on('mouseout',function() {
		$(this).find('ul').hide();
	});
</script>